<template>
    <div class="number-input" @click="handlerClick">
        <el-input :placeholder="placeholder" DOMMouseScroll.native.prevent clearable v-focus="{ focus }"
            v-model="modelValue" type="number" @mousewheel.native.prevent @change="change">
        </el-input>
    </div>
</template>
<script>
export default {
    props: ['paramOption', 'placeholder', 'focus'],
    data() {
        return {
            value: 0,
        }
    },
    computed: {
        option() {
            return this.paramOption?.option || {};
        },
        model() {
            return this.paramOption?.model || {};
        },
        config() {
            return this.paramOption?.config || {};
        },
        modelValue: {
            get() {
                if (this.option.customGet) {
                    return this.option.customGet(this.model, this.option)
                }
                return this.model[this.option.prop]
            },
            set(value) {
                if (this.option.customSet) {
                    this.option.customSet(this.model, value)
                    return
                }
                this.$set(this.model, this.option.prop, value)

            }
        }
    },
    methods: {
        change(value) {
            this.$emit('change', value)
        },
        handlerClick(e) {
            e.preventDefault();
            e.stopPropagation();
        }
    }
}
</script>

<style lang="scss">
.number-input {

    /* 清除number输入框上下箭头 */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: textfield;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }
}
</style>